import{d as t,M as l,A as c,h as r}from"./Anchors-CRD96j4l.js";import{D as s,a as i}from"./Demo-Ck8WGKWN.js";import"./index-BpvWz174.js";const o={path:"/view/tree",name:"tree",title:"Tree 树状控件"};function n(d){const e={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",span:"span",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...d.components};return l(r,{children:[l("div",{class:"sys-ctx-main-left",children:[l(e.h1,{id:"sp-",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-",children:t(e.span,{className:"icon icon-link"})}),o.title]}),l(e.h2,{id:"sp-demos",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-demos",children:t(e.span,{className:"icon icon-link"})}),"代码演示 "]}),t(s,{columns:2}),t(i,{id:"base",title:"基础用法",src:"1base.demo.tsx",code:`import { Tree } from "cui-solid";

export default () => {
    const data = [
        {id: 'beijing', title: '北京', children: [
            {id: 'gugong', title: '故宫'},
            {id: 'tiantan', title: '天坛'},
        ]},
        {id: 'zhejiang', title: '浙江', children: [
            {id: 'xihu', title: '西湖'},
            {id: 'linyin', title: '灵隐'},
        ]},
    ]

    return <Tree data={data}/>
}`,scopes:void 0,children:l(e.p,{children:["Tree 传入 ",t(e.code,{className:"sp-inline-code",children:"data"})," 数据展示树状组件"]})}),t(i,{id:"opened",title:"默认展开",src:"2opened.demo.tsx",code:`import { Tree } from "cui-solid";
import { createSignal } from "solid-js";

export default () => {
    const [opened, setOpened]: any = createSignal(['zhejiang']);

    const data = [
        {id: 'beijing', title: '北京', children: [
            {id: 'gugong', title: '故宫'},
            {id: 'tiantan', title: '天坛'},
        ]},
        {id: 'zhejiang', title: '浙江', children: [
            {id: 'xihu', title: '西湖'},
            {id: 'linyin', title: '灵隐'},
        ]}
    ]

    return <Tree data={data} opened={[opened, setOpened]}/>
}`,scopes:void 0,children:l(e.p,{children:[t(e.code,{className:"sp-inline-code",children:"opened"})," 参数控制默认打开的节点"]})}),t(i,{id:"selected",title:"默认选中",src:"3selected.demo.tsx",code:`import { Tree } from "cui-solid";
import { createSignal } from "solid-js";

export default () => {
    const [opened, setOpened]: any = createSignal(['zhejiang']);
    const [selected, setSelected]: any = createSignal('xihu');

    const data = [
        {id: 'beijing', title: '北京', children: [
            {id: 'gugong', title: '故宫'},
            {id: 'tiantan', title: '天坛'},
        ]},
        {id: 'zhejiang', title: '浙江', children: [
            {id: 'xihu', title: '西湖'},
            {id: 'linyin', title: '灵隐'},
        ]}
    ]

    return <Tree data={data} opened={[opened, setOpened]} selected={[selected, setSelected]} onSelect={(node: any) => {
        console.log(node);
    }}/>
}`,scopes:void 0,children:l(e.p,{children:[t(e.code,{className:"sp-inline-code",children:"selected"})," 参数控制选中的节点"]})}),t(i,{id:"multi",title:"级联多选",src:"4multi.demo.tsx",code:`import { Tree } from "cui-solid";

export default () => {
    const data = [
        {id: 'beijing', title: '北京', children: [
            {id: 'gugong', title: '故宫'},
            {id: 'tiantan', title: '天坛'},
        ]},
        {id: 'zhejiang', title: '浙江', children: [
            {id: 'xihu', title: '西湖'},
            {id: 'linyin', title: '灵隐'},
        ]}
    ]

    return <Tree data={data} multi/>
}`,scopes:void 0,children:l(e.p,{children:["设置 ",t(e.code,{className:"sp-inline-code",children:"multi"})," 参数可以进行多选，默认级联"]})}),t(i,{id:"multi_unrelate",title:"非级联多选",src:"5multi_unrelate.demo.tsx",code:`import { Tree } from "cui-solid";

export default () => {
    const data = [
        {id: 'beijing', title: '北京', children: [
            {id: 'gugong', title: '故宫'},
            {id: 'tiantan', title: '天坛'},
        ]},
        {id: 'zhejiang', title: '浙江', children: [
            {id: 'xihu', title: '西湖'},
            {id: 'linyin', title: '灵隐'},
        ]}
    ]

    return <Tree data={data} multi checkRelation="unRelated"/>
}`,scopes:void 0,children:l(e.p,{children:[t(e.code,{className:"sp-inline-code",children:"checkRelation"})," 参数可以设置多选场景下的级联情况，",t(e.code,{className:"sp-inline-code",children:"unRelated"})," 非级联 ",t(e.code,{className:"sp-inline-code",children:"related"})," 级联"]})}),t(i,{id:"disabled",title:"禁用",src:"6disabled.demo.tsx",code:`import { Tree } from "cui-solid";

export default () => {
    const data = [
        {id: 'beijing', title: '北京', children: [
            {id: 'gugong', title: '故宫', disabled: true},
            {id: 'tiantan', title: '天坛'},
        ]},
        {id: 'zhejiang', title: '浙江', children: [
            {id: 'xihu', title: '西湖'},
            {id: 'linyin', title: '灵隐'},
        ]},
    ]

    return <Tree data={data} multi />
}`,scopes:void 0,children:l(e.p,{children:["数据项添加 ",t(e.code,{className:"sp-inline-code",children:"disabled"})," 参数可以禁用节点"]})}),t(i,{id:"directory",title:"目录图标",src:"7directory.demo.tsx",code:`import { Tree } from "cui-solid";

export default () => {
    const data = [
        {id: 'beijing', title: '北京', children: [
            {id: 'gugong', title: '故宫'},
            {id: 'tiantan', title: '天坛'},
        ]},
        {id: 'zhejiang', title: '浙江', children: [
            {id: 'xihu', title: '西湖'},
            {id: 'linyin', title: '灵隐'},
        ]}
    ]

    return <Tree data={data} multi directory />
}`,scopes:void 0,children:l(e.p,{children:["添加",t(e.code,{className:"sp-inline-code",children:"directory"})," 参数可以显示目录图标"]})}),t(i,{id:"loadData",title:"动态加载",src:"8loadData.demo.tsx",code:`import { Tree } from "cui-solid";

export default () => {
    const data = [];
    for (let i = 0; i < 1 + Math.random() * 5; i++) {
        data.push({title: \`node_\${i}\`, id: \`\${i}\`, loading: true});
    }

    return <Tree data={data} multi directory loadData={(data: any) => {
        return new Promise((resolve) => {
            const d: any = [];
            for (let i = 0; i < 1 + Math.random() * 5; i++) {
                d.push({title: \`node_\${data.id}_\${i}\`, id: \`\${data.id}_\${i}\`});
            }
            setTimeout(() => {
                resolve(d);
            }, 1000);
        });
    }}/>
}`,scopes:void 0,children:l(e.p,{children:["数据项存在 ",t(e.code,{className:"sp-inline-code",children:"loading"})," 参数， 可通过 ",t(e.code,{className:"sp-inline-code",children:"loadData"})," 方法动态加载子节点"]})}),t(i,{id:"contextmenu",title:"右键菜单",src:"9contextmenu.demo.tsx",code:`import { DropdownItem, DropdownMenu, Tree } from "cui-solid";

export default () => {
    const data = [
        {id: 'beijing', title: '北京', children: [
            {id: 'gugong', title: '故宫'},
            {id: 'tiantan', title: '天坛'},
        ]},
        {id: 'zhejiang', title: '浙江', children: [
            {id: 'xihu', title: '西湖'},
            {id: 'linyin', title: '灵隐'},
        ]}
    ];

    return <Tree data={data} multi directory onContextMenu={(data: any) => {
        console.log(data);
    }} contextMenu={<DropdownMenu>
        <DropdownItem name="add">添加</DropdownItem>
        <DropdownItem name="modity">修改</DropdownItem>
    </DropdownMenu>} onSelectMenu={(name: string) => {
        console.log(name);
    }}/>
}`,scopes:void 0,children:l(e.p,{children:["可通过 ",t(e.code,{className:"sp-inline-code",children:"contextMenu"})," 属性添加右键菜单， ",t(e.code,{className:"sp-inline-code",children:"onContextMenu"})," 属性添加菜单点击事件"]})}),t(i,{id:"methods",title:"接口",src:"10methods.demo.tsx",code:`import { Button, DropdownItem, DropdownMenu, Space, Tree } from "cui-solid";

export default () => {
    const data = [
        {id: 'beijing', title: '北京', children: [
            {id: 'gugong', title: '故宫'},
            {id: 'tiantan', title: '天坛'},
        ]},
        {id: 'zhejiang', title: '浙江', children: [
            {id: 'xihu', title: '西湖'},
            {id: 'linyin', title: '灵隐'},
        ]}
    ];

    let tree: any;

    return <>
        <Tree data={data} multi directory ref={tree}/>

        <Space dir="v">
            <Space dir="h">
                <Button onClick={() => {
                    tree.checkNode('xihu', true);
                }}>勾选</Button>
            </Space>
            <Space>
                <Button type="primary" onClick={() => {
                    console.log(tree.getAllChecked());
                }}>AllChecked</Button>
                <Button type="primary" onClick={() => {
                    console.log(tree.getHalfChecked());
                }}>HalfChecked</Button>
                <Button type="primary" onClick={() => {
                    console.log(tree.getChildChecked());
                }}>ChildChecked</Button>
                <Button type="primary" onClick={() => {
                    console.log(tree.getShallowChecked());
                }}>Shallow</Button>
            </Space>
        </Space>
    </>
}`,scopes:void 0,children:l(e.p,{children:[t(e.code,{className:"sp-inline-code",children:"getAllChecked"})," ",t(e.code,{className:"sp-inline-code",children:"getHalfChecked"})," ",t(e.code,{className:"sp-inline-code",children:"getChildChecked"})," ",t(e.code,{className:"sp-inline-code",children:"getShallowChecked"})," 获取所有选中的节点"]})}),t(i,{id:"data",title:"可控数据",src:"11data.demo.tsx",code:`import { Button, Tree } from "cui-solid";
import { createSignal } from "solid-js";

export default () => {
    const [data, setData]: any = createSignal([{id: '1', title: '动态数据'}]);

    return <>
        <Tree data={data()} multi directory/>
        <Button type="primary" onClick={() => {
            const da = [];
            for (let i = 0; i < 1 + Math.random() * 5; i++) {
                const c = [];
                for (let j = 0; j < 1 + Math.random() * 5; j++) {
                    c.push({title: \`node_\${i}_\${j}\`, id: \`\${i}_\${j}\`});
                }
                da.push({title: \`node_\${i}\`, id: \`\${i}\`, children: c});
            }
            setData(da)
        }}>改变数据</Button>
    </>
}`,scopes:void 0,children:l(e.p,{children:["通过更改 ",t(e.code,{className:"sp-inline-code",children:"data"})," 属性更改tree的数据"]})}),l(e.h2,{id:"props",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#props",children:t(e.span,{className:"icon icon-link"})}),"属性 "]}),l(e.table,{className:"sp-table",children:[t(e.thead,{children:l(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"属性"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"类型"}),t(e.th,{style:{textAlign:"left"},children:"默认值"})]})}),l(e.tbody,{children:[l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"classList"}),t(e.td,{style:{textAlign:"left"},children:"自定义class"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"class"}),t(e.td,{style:{textAlign:"left"},children:"自定义class"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"style"}),t(e.td,{style:{textAlign:"left"},children:"自定义样式"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"data"}),t(e.td,{style:{textAlign:"left"},children:"源数据"}),t(e.td,{style:{textAlign:"left"},children:"Array"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"opened"}),t(e.td,{style:{textAlign:"left"},children:"可控打开节点id"}),t(e.td,{style:{textAlign:"left"},children:"Function[]"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"selected"}),t(e.td,{style:{textAlign:"left"},children:"可控选中节点id"}),t(e.td,{style:{textAlign:"left"},children:"Function[]"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"ref"}),t(e.td,{style:{textAlign:"left"},children:"组件引用对象"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"gutter"}),t(e.td,{style:{textAlign:"left"},children:"错位距离"}),t(e.td,{style:{textAlign:"left"},children:"number"}),t(e.td,{style:{textAlign:"left"},children:"24"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"value"}),t(e.td,{style:{textAlign:"left"},children:"可控值"}),t(e.td,{style:{textAlign:"left"},children:"Function[]"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"multi"}),t(e.td,{style:{textAlign:"left"},children:"多选，显示复选框"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"directory"}),t(e.td,{style:{textAlign:"left"},children:"显示目录图标"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"loadData"}),t(e.td,{style:{textAlign:"left"},children:"配合数据项的loading"}),t(e.td,{style:{textAlign:"left"},children:"Function"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"contextMenu"}),t(e.td,{style:{textAlign:"left"},children:"右键菜单配合DropdownMenu使用"}),t(e.td,{style:{textAlign:"left"},children:"JSXElement"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"checkRelation"}),t(e.td,{style:{textAlign:"left"},children:"选择框的级联关系"}),t(e.td,{style:{textAlign:"left"},children:"related | unRelated"}),t(e.td,{style:{textAlign:"left"},children:"related"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"onSelect"}),t(e.td,{style:{textAlign:"left"},children:"节点选中事件"}),t(e.td,{style:{textAlign:"left"},children:"Function"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"onChange"}),t(e.td,{style:{textAlign:"left"},children:"复选框选中事件"}),t(e.td,{style:{textAlign:"left"},children:"Function"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"onContextMenu"}),t(e.td,{style:{textAlign:"left"},children:"右键菜单事件"}),t(e.td,{style:{textAlign:"left"},children:"Function"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"onSelectMenu"}),t(e.td,{style:{textAlign:"left"},children:"右键菜单项选中事件"}),t(e.td,{style:{textAlign:"left"},children:"Function"}),t(e.td,{style:{textAlign:"left"}})]})]})]}),l(e.h2,{id:"item_props",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#item_props",children:t(e.span,{className:"icon icon-link"})}),"数据项属性 "]}),l(e.table,{className:"sp-table",children:[t(e.thead,{children:l(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"属性"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"类型"}),t(e.th,{style:{textAlign:"left"},children:"默认值"})]})}),l(e.tbody,{children:[l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"id"}),t(e.td,{style:{textAlign:"left"},children:"数据项标识字段"}),t(e.td,{style:{textAlign:"left"},children:"string | number"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"title"}),t(e.td,{style:{textAlign:"left"},children:"节点名称"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"loading"}),t(e.td,{style:{textAlign:"left"},children:"动态加载节点"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"icon"}),t(e.td,{style:{textAlign:"left"},children:"自定义图标"}),t(e.td,{style:{textAlign:"left"},children:"any"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"disabled"}),t(e.td,{style:{textAlign:"left"},children:"节点禁用"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"patch"}),t(e.td,{style:{textAlign:"left"},children:"追加数据"}),t(e.td,{style:{textAlign:"left"},children:"JSXElement"}),t(e.td,{style:{textAlign:"left"}})]})]})]}),l(e.h2,{id:"events",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#events",children:t(e.span,{className:"icon icon-link"})}),"事件 "]}),l(e.table,{className:"sp-table",children:[t(e.thead,{children:l(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"事件名称"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"返回值"})]})}),l(e.tbody,{children:[l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:t(e.code,{className:"sp-inline-code",children:"onSelect"})}),t(e.td,{style:{textAlign:"left"},children:"节点选中事件"}),t(e.td,{style:{textAlign:"left"},children:"node"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:t(e.code,{className:"sp-inline-code",children:"onChange"})}),t(e.td,{style:{textAlign:"left"},children:"复选框选中事件"}),t(e.td,{style:{textAlign:"left"},children:"value"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:t(e.code,{className:"sp-inline-code",children:"onContextMenu"})}),t(e.td,{style:{textAlign:"left"},children:"右键菜单事件"}),t(e.td,{style:{textAlign:"left"},children:"node"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:t(e.code,{className:"sp-inline-code",children:"onSelectMenu"})}),t(e.td,{style:{textAlign:"left"},children:"右键菜单项选中事件"}),t(e.td,{style:{textAlign:"left"},children:"name"})]})]})]})]}),`
`,`
`,`
`,t(c,{data:[{id:"",depth:1,title:""},{id:"sp-demos",depth:2,title:"代码演示"},{id:"base",title:"基础用法",src:"1base.demo.tsx"},{id:"opened",title:"默认展开",src:"2opened.demo.tsx"},{id:"selected",title:"默认选中",src:"3selected.demo.tsx"},{id:"multi",title:"级联多选",src:"4multi.demo.tsx"},{id:"multi_unrelate",title:"非级联多选",src:"5multi_unrelate.demo.tsx"},{id:"disabled",title:"禁用",src:"6disabled.demo.tsx"},{id:"directory",title:"目录图标",src:"7directory.demo.tsx"},{id:"loadData",title:"动态加载",src:"8loadData.demo.tsx"},{id:"contextmenu",title:"右键菜单",src:"9contextmenu.demo.tsx"},{id:"methods",title:"接口",src:"10methods.demo.tsx"},{id:"data",title:"可控数据",src:"11data.demo.tsx"},{id:"props",depth:2,title:"属性"},{id:"item_props",depth:2,title:"数据项属性"},{id:"events",depth:2,title:"事件"}]})]})}function x(d={}){const{wrapper:e}=d.components||{};return e?t(e,{...d,children:t(n,{...d})}):n(d)}export{x as default,o as frontmatter};
